<template>
  <div>
    <el-card class="asset-card" shadow="hover">
      <div class="asset-name">{{asset.name}}</div>
      <el-tag>hello</el-tag>
<!--      <div class="asset-tags">收益</div>-->
      <div class="asset-info">
        <div class="asset-amount">金额</div>
        <div class="asset-profit">收益</div>
      </div>
      <div class="asset-info">
        <div class="asset-amount">{{asset.amount}}</div>
        <div class="asset-profit" >{{asset.profit}}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    asset: Object
  }
}
</script>

<style>
.el-card{
  //display: block;
  top: 20px;
  width: 45%;
}
.asset-card {
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.asset-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.asset-tags {
  font-size: 14px;
  margin-bottom: 10px;
}

.asset-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.asset-amount {
  font-size: 16px;
  font-weight: bold;
}

.asset-profit {
  font-size: 14px;
  color: green;
  margin-left: 5px;
}
</style>
